<template>
	<div class="personal layout-pd">
		<el-row>
			<el-col :span="24">
				<el-row :gutter="20">
					<el-col :span="12">


						<div class="mt-4" style="margin-bottom: 10px;">
							<el-input v-model="searchType.name" size="small" placeholder="请输入" style="width: 300px;" clearable @change="searchTypeHandle">
								<template #append>
									<el-button type="primary" size="small" 
										@click="searchTypeHandle">搜索</el-button>
								</template>
							</el-input>
						</div>

						<el-table :data="dictTypeData" style="width: 100%" size="small">
							<el-table-column prop="name" label="字典名称" />
							<el-table-column prop="code" label="字典类型" />
							<el-table-column prop="state" label="状态">
								<template #default="scope">
									<el-tag size="small" :type="scope.row.state === '1' ? 'success' : 'warning'"
										disable-transitions>{{ scope.row.state === '1' ? '正常' : '停用' }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="120">
								<template #default="scope">
									<el-button link type="primary" size="small" @click.prevent="getDatas(scope.row)">
										查看字典数据
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="page-block">
							<el-pagination v-model:currentPage="current" v-model:page-size="page"
								:page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
								layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true"
								@size-change="handleSizeChange" @current-change="handleCurrentChange" />
						</div>
					</el-col>
					<el-col :span="12">
						<el-button type="primary" size="small" style="margin-bottom: 10px;"
							@click="openAdd">添加字典数据</el-button>
						<el-table :data="dictDataD" style="width: 100%" size="small">
							<el-table-column prop="sortNo" label="排序" />
							<el-table-column prop="name" label="名称">
								<template #default="scope">
									<el-tag size="small" :type="scope.row.tagClass !== null ? scope.row.tagClass : ''"
										disable-transitions>{{ scope.row.name }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="value" label="数据值" />
							<el-table-column prop="state" label="状态">
								<template #default="scope">
									<el-tag size="small" :type="scope.row.state === '1' ? 'success' : 'warning'"
										disable-transitions>{{ scope.row.state === '1' ? '正常' : '停用' }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="120">
								<template #default="scope">
									<el-button link type="primary" size="small" @click.prevent="editDictData(scope.row)">
										编辑
									</el-button>
									<el-button link type="primary" size="small" @click.prevent="removeDictData(scope.row)">
										删除
									</el-button>
								</template>
							</el-table-column>
						</el-table></el-col>
				</el-row>
			</el-col>

		</el-row>
	</div>

	<el-dialog v-model="dialogFormVisible" :title="formTitle" :before-close="handleFormClose">
		<el-form ref="ruleFormRef" :model="dataForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			:size="formSize" status-icon>
			<el-form-item label="字典类型">
				<el-input v-model="dataForm.code" disabled="true" />
			</el-form-item>
			<el-form-item label="数据标签" prop="name">
				<el-input v-model="dataForm.name" clearable />
			</el-form-item>
			<el-form-item label="数据键值" prop="name">
				<el-input v-model="dataForm.value" clearable />
			</el-form-item>
			<el-form-item label="排序" prop="name">
				<el-input-number v-model="dataForm.sortNo" :min="1" size="small" controls-position="right" />
			</el-form-item>
			<el-form-item label="回显样式" prop="name">
				<el-select v-model="dataForm.tagClass" class="m-2" placeholder="请选择" size="small">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="状态" prop="name">
				<el-radio-group v-model="dataForm.state" class="ml-4">
					<el-radio label="0">停用</el-radio>
					<el-radio label="1">正常</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button size="small" @click="handleFormClose">取消</el-button>
				<el-button size="small" type="primary" @click="sumbitForm(ruleFormRef)">
					确认
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script  lang="ts" name="personal">
import { reactive, computed, onMounted, toRefs } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { useUserInfo } from '/@/stores/userInfo'
import { storeToRefs } from 'pinia';
import { getTypePage, getDataPage, createData, editData, deleteData } from '/@/api/sys/dict'
import Cookies from 'js-cookie'
import { Session, Local } from '/@/utils/storage'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
	setup(props, context) {
		const storeUserInfo = useUserInfo()
		const { userInfos } = storeToRefs(storeUserInfo)
		// 定义变量内容
		const state = reactive({
			uploadUrl: '/api/file/filaAttach/upload',
			headers: {
				'17work': Session.get('token')
			},
			formSize: 'small',
			rules: {
			},
			dictTypeData: [
			],
			// 字典类型
			searchType: {
				current: 1,
				size: 10
			},
			total: 100,
			current: 1,
			page: 10,
			// 字典数据
			searchData: {
				current: 1,
				size: 30,
				enterpriseId: null,
				code: null
			},
			dictDataD: [],
			//添加表单数据
			dialogFormVisible: false,
			dataForm: {},
			formTitle: null,
			options: [{ label: '默认(Default)', value: 'default' },
			{ label: '主要(primary)', value: 'primary' },
			{ label: '成功(success)', value: 'success' },
			{ label: '信息(info)', value: 'info' },
			{ label: '警告(warning)', value: 'warning' },
			{ label: '危险(danger)', value: 'danger' }],
			nowOptType: {}
		});

		// 当前时间提示语
		const currentTime = computed(() => {
			return formatAxis(new Date());
		});

		const backageImagesOnSuccess = (response, uploadFiles) => {
		}
		const handleSizeChange = e => {
			state.searchType.size = e
			typePages()
		}
		const handleCurrentChange = e => {
			state.searchType.current = e
			state.current = e
			typePages()
		}
		const getDatas = (data) => {
			state.nowOptType = data
			state.searchData.code = data.code
			getDataPage(state.searchData).then(res => {
				state.dictDataD = res.data.records
			})
		}

		const typePages = () => {
			getTypePage(state.searchType).then(res => {
				if (res.code == 0) {
					state.dictTypeData = res.data.records
					state.total = res.data.total
				}
			})
		};
		const openAdd = () => {
			if (state.nowOptType.code) {
				state.formTitle = '添加'
				state.dialogFormVisible = true
				restForm()
			} else {
				ElMessage.error("请选择字典类型");
			}

		}
		const editDictData = (data) => {
			state.formTitle = '编辑'
			state.dialogFormVisible = true
			data.state = data.state + ""
			state.dataForm = data
		}
		const removeDictData = (row) => {
			ElMessageBox.confirm(
				'是否确认删除名称为"' + row.name + '"的数据项？',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				deleteData({ id: row.id }).then(res => {
					if (res.code == 0) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
						getDatas(state.nowOptType)
					} else {
						ElMessage({
							type: 'error',
							message: '删除失败：' + res.message,
						})
					}
				})

			}).catch()
		}

		const handleFormClose = () => {
			state.dialogFormVisible = false
		}
		const restForm = () => {
			state.dataForm = {
				name: null,
				code: state.nowOptType.code,
				value: null,
				sortNo: 1,
				tagClass: null,
				state: "1",
				id: null
			}
		}
		const sumbitForm = async (formEl) => {
			if (!formEl) return
			await formEl.validate((valid) => {
				if (valid) {
					if (state.dataForm.id) {
						editData(state.dataForm).then(res => {
							if (res.code == 0) {
								ElMessage.success("修改成功");
								getDatas(state.nowOptType)
								handleFormClose()
							}
						})
					} else {
						createData(state.dataForm).then(res => {
							if (res.code == 0) {
								ElMessage.success("新增成功");
								getDatas(state.nowOptType)
								handleFormClose()
							}
						})
					}


				}
			})
		};

		const searchTypeHandle = () =>{
			state.searchType.current = 1
			typePages()
		}

		const {
			ruleFormRef
		} = toRefs(props)

		onMounted(() => {
			typePages()
		})
		return {
			currentTime,
			ruleFormRef,
			backageImagesOnSuccess,
			handleSizeChange,
			handleCurrentChange,
			getDatas,
			openAdd,
			handleFormClose,
			sumbitForm,
			editDictData,
			removeDictData,
			restForm,
			searchTypeHandle,
			...toRefs(state),
		}
	}
}












</script>

<style scoped lang="scss">
.layout-pd {
	padding: 20px 20px 0px 20px;

}
</style>